<template>
	<view class="container">
		<view class="address">
		  <view @click="goAddress()" class="cell">
			  <view class="information">
				  <view v-if="address" class="location">{{address.location}}</view>
				  <view v-else class="location">服务地址</view>
				  <view v-if="address" class="user">
					  <text>{{address.name}}</text>
					  <text>{{address.phone}}</text>
				  </view>
			  </view>
			  <image style="width: 40rpx;height: 40rpx;" src="../../static/feed/right.png"></image>
		  </view>
		  <view class="dliver"></view>
		</view>
		<view class="detail">
			<view class="title">
				选择服务
			</view>
			<view class="list">
				<view @click="select(index)" v-for="(item,index) in taocan" :key="index" :class="['list-item',item.selected ? 'active':'']">
					<view class="recommend" v-if="item.recommend">推荐</view>
					<view v-if="item.selected" class="tixing"><icon size="15" style="transform:rotate(135deg);position: absolute;top: -35rpx;" type="success_no_circle" color="#0f0c04"></icon></view>
					<scroll-view style="height: 100%;" scroll-y="true">
						<view class="taocantitle">{{item.title}}</view>
						<view class="price">￥{{item.price}}</view>
						<view class="include" v-for="(item,index) in item.include">
							· {{item}}
						</view>
						<view class="include">总服务时长：{{item.time}}分钟</view>
						<view class="include">{{item.content}}</view>
					</scroll-view>
				</view>
			</view>
			<view class="pet">
				<view class="title">服务宠物</view>
				<scroll-view scroll-x="true">
					<view class="grid">
						<view class="grid-item" v-for="(item,index) in petList" :key="index">
							<image @click="deletepet(index)" style="width: 40rpx;height: 40rpx;position: absolute;top:-5rpx;right: 5rpx;" src="../../static/feed/delete.png"></image>
							<image :src="item.pet_avatur"></image>
							<view class="name">{{item.pet_name}}</view>
						</view>
						<view @click="goChoosepet()" class="grid-item">
							<image src="../../static/user/add.png"></image>
							<view style="color: #9c9c9c;" class="name">添加宠物</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view>
			<view @click="openDate()"><Cell title="服务日期" :content="(riqi+qujian)===''?'请选择服务日期':(riqi+' '+qujian)"></Cell></view>
			<view @click="goChoosepeople()"><Cell title="服务人员" :content="people?people.name:'请选择服务人员'"></Cell></view>
			<view @click="goBeizhu()"><Cell title="服务备注" :content="beizhu===''?'选填':beizhu"></Cell></view>
		</view>
		<view class="pay">
			<view class="title">选择支付方式</view>
			<view class='pay-item'>
				<view class="left">
					<image style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" src="../../static/home/cat.png"></image>
					<view style="font-size: 28rpx;letter-spacing: 0.1em;">宠家支付</view>
				</view>
				<view class="right">
					<radio color="#f4e088" activeBackgroundColor="#0b0801" :checked="true"></radio>
				</view>
			</view>
		</view>
		<Mustknow @changeread="readchange"></Mustknow>
		<view class="bottom">
			<view class="left">
				合计：<text style="color:#cc6278;">￥{{sum}}</text>
			</view>
			<view @click="pay()" class="button">
				去支付
			</view>
		</view>
		<uni-popup @maskClick="guanbi" ref="datepop" background-color="#ffffff">
			<view style="width: 500rpx;padding: 40rpx;box-sizing: border-box;">
				<view style="margin-bottom: 20rpx;font-weight: 500;">选择您的服务时间</view>
				<uni-datetime-picker @change="timelistchange" style="margin-bottom: 10rpx;" :start="Date.now()" type="date" :clear-icon="false" v-model="riqi"  />
				<uni-data-select
					v-if="riqi!==''"
					style="margin-bottom: 20rpx;"
				    v-model="qujian"
				    :localdata="timelist"
				/>
				<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
					<view @click="quren()" class="button">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup @maskClick="quxiao" ref="beizhupop" background-color="#ffffff">
			<view style="width: 500rpx;padding: 40rpx;box-sizing: border-box;">
				<view style="margin-bottom: 20rpx;font-weight: 500;">请输入备注</view>
				<view style="width: 100%;height: 80rpx;background-color: #fafafa;display: flex;align-items: center;padding: 10rpx 20rpx;box-sizing: border-box;border-radius: 20rpx;margin-bottom: 20rpx;"><input v-model="beizhu"></input></view>
				<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
					<view @click="qurenbeizhu()" class="button">确认</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onMounted,onBeforeMount,computed} from "vue"
	import Cell from "@/pages/feed/components/cell.vue"
	import http from "@/utils/request.js"
	import Mustknow from "@/pages/feed/components/mustknow.vue"
	let sum=computed(()=>{
		return price.value
	})
	onBeforeMount(()=>{
		let addresslist=uni.getStorageSync('addresslist')
		addresslist.forEach(item=>{
			if(item.isdefault===1){
				return address.value=item
			}
		})
	})
	onMounted(()=>{
		getpackage()
		uni.$on('receiveaddress',(e)=>{
			console.log(e)
			address.value=e
		})
		uni.$on('receivepeople',(e)=>{
			console.log(e)
			people.value=e
		})
		uni.$on('receivepet',(e)=>{
			console.log(e)
			let flag=false;
			petList.value.forEach((item)=>{
				if(item.pet_id===e.pet_id)flag=true;
			})
			if(!flag){
				petList.value.push(e)
			}
		})
		uni.$on('receivebeizhu', (e) => {  
		    console.log(e);
			  beizhu.value=e
		  });
		return ()=>{
			uni.$off('receivepet')
			uni.$off('receivepeople')
			uni.$off('receiveaddress')
			uni.$off('receivebeizhu')
		}
	})
	let isread=ref(false)
	let people=ref(null)
	let riqi=ref('')
	let price=ref(0)
	let qujian=ref('')
	let beizhu=ref('')
	let timelist=ref([])
	let datepop=ref(null)
	let petList=ref([])
	let address=ref(null)
	let taocan=ref([])
	
	function readchange(e){
		isread.value=e
	}
	function pay(){
		console.log(isread.value)
		if(!isread.value)return uni.showToast({
			title:'未同意协议',
			icon:'none'
		})
		if((riqi.value+qujian.value)==='')return uni.showToast({
			title:'未选择时间',
			icon:'none'
		})
		let order_pet=''
		let order_address=address.value.location+address.value.detail+';'+address.value.name+';'+address.value.phone+';'+address.value.wx
		petList.value.forEach((item)=>{
			order_pet=order_pet+item.pet_id+';'
		})
		if(order_pet==='')return uni.showToast({
			title:'未选择宠物',
			icon:'none'
		})
		if(!people.value)return uni.showToast({
			title:'未选择人员',
			icon:'none'
		})
		let order_package=''
		taocan.value.forEach(item=>{
			if(item.selected)order_package=item.title
		})
		if(order_package==='')return uni.showToast({
			title:'未选择套餐',
			icon:'none'
		})
		let time=qujian.value.split('-')
		let response=http.post('/order/addorder',{
			order_sum:sum.value,
			order_pet:order_pet,
			order_address:order_address,
			order_service:'1',
			order_status:1,
			order_people:people.value.people_id,
			order_package:order_package,
			create_time:Date.now(),
			start_time:riqi.value+' '+time[0],
			end_time:riqi.value+' '+time[1],
			order_beizhu:beizhu.value,
			order_image:petList.value[0].pet_avatur,
			order_order:uni.getStorageSync('userinfo').user_id
		})
		response.then(res=>{
			if(res.data.code===200){
				uni.showToast({
					title:'订单生成成功',
					duration:1000
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
	function deletepet(index){
		petList.value.splice(index,1)
	}
	function getpackage(){
		let response =http.get('/package/getpackage',{service_id:1})
		response.then(res=>{
			if(res.data.code===200){
				res.data.data.forEach((item)=>{
					item.selected=false
				})
				taocan.value=res.data.data
			}
		})
	}
	function guanbi(){
		riqi.value=''
		qujian.value=''
	}
	function quren(){
		datepop.value.close()
	}
	function openDate(){
		datepop.value.open()
	}
	function goBeizhu(){
		uni.navigateTo({
			url:"/pages/feed/beizhu"
		})
	}
	function timelistchange(){
		const choosedate=new Date(riqi.value)
		const now=new Date();
		if(choosedate.getTime()>now.getTime()){
			let array=[];
			for(let i=8;i<=21;i++){
				const obj={
					text:i.toString()+':00-'+(i+1).toString()+':00',
					value:i.toString()+':00-'+(i+1).toString()+':00'
				}
				array.push(obj)
			}
			timelist.value=array
			return
		}
		const currenthour=now.getHours()
		let array=[];
		for(let i=currenthour+1;i<=21;i++){
			const obj={
				text:i.toString()+':00-'+(i+1).toString()+':00',
				value:i.toString()+':00-'+(i+1).toString()+':00'
			}
			array.push(obj)
		}
		timelist.value=array
	}
	function select(index){
		taocan.value.forEach((item)=>{
			item.selected=false;
		})
		taocan.value[index].selected=true;
		price.value=taocan.value[index].price
	}
	function goAddress(){
		uni.navigateTo({
			url:"/pages/address/list"
		})
	}
	function goChoosepet(){
		uni.navigateTo({
			url:"/pages/feed/choosepet"
		})
	}
	function goChoosepeople(){
		uni.navigateTo({
			url:"/pages/feed/choosepeople"
		})
	}
</script>

<style lang="scss">
	.container{
		.address{
			position: relative;
			
			.cell{
				width: 100%;
				height: 150rpx;
				box-sizing: border-box;
				display: flex;
				padding: 0 20rpx;
				align-items: center;
				justify-content: space-between;
				background-color: #ffffff;
				
				&:active{
					background-color: #efefef;
				}
				
				.information{
					display: flex;
					flex-direction: column;
					width: 80%;
					
					.location{
						font-size: 32rpx;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 15rpx;
					}
					
					.user{
						display: flex;
						font-size: 28rpx;
						color: #8a898d;
						
						text{
							width: 40%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-right: 10rpx;
						}
					}
				}
			}
			
			.dliver{
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				height: 10rpx;
				background: repeating-linear-gradient(-45deg, #efb9ba, #efb9ba 20%, transparent 0, transparent 25%, #fbeca7 0, #fbeca7 45%, transparent 0, transparent 50%);
				background-size: 160rpx;
				content: "";
			}
		}
		
		.detail{
			width: 100%;
			padding: 40rpx 20rpx;
			margin-bottom: 10rpx;
			background-color: #ffffff;
			
			.title{
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 0.1em;
				margin-bottom: 40rpx;
			}
			
			.list{
				width: 100%;
				display: flex;
				margin-bottom: 40rpx;
				
				&-item{
					width: 38%;
					height: 320rpx;
					margin-right: 30rpx;
					border:4rpx solid #ebebeb;
					border-radius: 20rpx;
					padding: 20rpx 20rpx;
					position: relative;
					
					.recommend{
						position: absolute;
						top:-35rpx;
						left: 0;
						padding: 10rpx 20rpx;
						font-size: 28rpx;
						font-weight: 600;
						background-color: #f2e283;
						border-radius: 30rpx 30rpx 30rpx 5rpx;
					}
					
					.taocantitle{
						font-size: 30rpx;
					}
					
					.price{
						color:#cc6278;
						font-size: 30rpx;
					}
					
					.include{
						color:#9b9b9b;
						font-size: 28rpx;
					}
					
					&.active{
						border-color:#f2e283;
						background-color: #fefef6;
					}
					
					.tixing{
						position: absolute;
						top: -40rpx;
						right: -50rpx;
						width: 30rpx;
						border-top: 40rpx solid #f3e283; // 梯形的高
						border-right: 40rpx solid transparent; // 往右延伸
						border-bottom: 50rpx solid transparent; // 整个div的高
						border-left: 40rpx solid transparent; // 往左延伸
						transform:rotate(-135deg)
					}
				}
			}
			
			.pet{
				.grid{
					display: flex;
					
					&-item{
						display: flex;
						position: relative;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-right: 30rpx;
						
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius:50%;
							margin-bottom: 10rpx;
						}
						
						.name{
							letter-spacing: 0.1em;
							font-size: 28rpx;
						}
					}
				}
			}
		}
		
		.pay{
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			padding: 40rpx 20rpx;
			margin-bottom: 10rpx;
			background-color: #ffffff;
			
			.title{
				font-size: 30rpx;
				font-weight: 600;
				letter-spacing: 0.1em;
				margin-bottom: 40rpx;
			}
			
			&-item{
				display: flex;
				width: 100%;
				background-color:#fffef9 ;
				box-sizing: border-box;
				border-radius: 20rpx;
				padding: 40rpx 20rpx;
				height: 100rpx;
				border:2rpx solid #eee295;
				align-items: center;
				justify-content: space-between;
				
				.left{
					display: flex;
					align-items: center;
				}
			}
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
			background-color: #ffffff;
			border-radius:20rpx 20rpx 0 0 ;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.button{
				background-color: #f8e177;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #090300;
				letter-spacing: 0.2em;
				width: 40%;
				height: 70%;
				border-radius: 50rpx;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
		.button{
			background-color: #f8e177;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #090300;
			letter-spacing: 0.2em;
			width: 90%;
			height: 70rpx;
			margin-top: 20rpx;
			border-radius: 50rpx;
			
			&:active{
				opacity: 0.7;
			}
		}
	}
</style>
